<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="修改密码" @ok="handleSubmit">
    <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
      <a-form-item name="oldpassword">
        <div class="black font-size-13">原有密码</div>
        <div class="pass-padding">
          <a-input-password v-model:value="formState.oldpassword" placeholder="原有密码" />
        </div>
        <div style="display: block">
          <span class="gray-9e float-left font-size-13">进入网站的登录密码</span>
        </div>
      </a-form-item>
      <a-form-item name="password">
        <span class="black font-size-13">新密码</span>
        <div class="pass-padding">
          <a-input-password v-model:value="formState.password" placeholder="新密码" />
        </div>
        <span class="gray-9e font-size-13">8-20位，需包含字母和数字</span>
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
<script lang="ts" name="user-pass-word-modal" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { Rule } from '@/components/Form/index';
import { updateUserPassword } from '../UserSetting.api';
import { useMessage } from '@/hooks/web/useMessage';
import { useUserStore, useUserStoreWithOut } from '@/store/modules/user';

const $message = useMessage();
//用户名
const username = ref<string>('');
const formRef = ref();
const formState = reactive({
  oldpassword: '',
  password: '',
});
// 声明Emits
const emit = defineEmits(['success', 'register']);
//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {
  setModalProps({ confirmLoading: false });
  username.value = data.record.username;
});
const userStore = useUserStore();
const validatorRules: Record<string, Rule[]> = {
  password: [
    { required: true, validator: checkPassword },
    { pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])(.{8,20})$/, message: '8-20位，需包含字母和数字' },
  ],
  oldpassword: [{ required: true, message: '请输入原有密码' }],
};

//表单提交事件
async function handleSubmit() {
  try {
    let values = await formRef.value.validateFields();
    setModalProps({ confirmLoading: true });
    //提交表单
    values.username = unref(username);
    values.confirmpassword = values.password;
    await updateUserPassword(values).then(res => {
      if (res.success) {
        $message.createMessage.info({
          content: '密码修改成功，请重新登录！3s后自动退出登录',
          duration: 3,
        });
        //3s后返回登录页面
        setTimeout(() => {
          userStore.logout(true);
        }, 3000);
        //关闭弹窗
        closeModal();
      } else {
        $message.createMessage.warn(res.message);
      }
    });
  } finally {
    setModalProps({ confirmLoading: false });
  }
}

/**
 * 验证新密码是否为空
 */
function checkPassword(_rule: Rule, value: string) {
  if (value === '') {
    return Promise.reject('请输入新密码');
  }
  return Promise.resolve();
}
</script>
<style lang="less" scoped>
.black {
  color: #000000;
}
.font-size-13 {
  font-size: 13px;
  line-height: 15px;
}
.gray-9e {
  color: #9e9e9e;
}
.float-left {
  float: left;
}
.pass-padding {
  padding-top: 10px;
  padding-bottom: 10px;
}
.forget {
  float: right;
  color: #1e88e5 !important;
  cursor: pointer;
}
</style>
